<template>
  <div style="padding:10px 0 ">
    <div v-if="noApproval">
      费用账单已删除
    </div>
    <div v-else>
      <a-table v-if="autoSystem" :columns="getColumns()" :data-source="data" bordered :scroll="{ x: ColumnsLength * 200, y: 450 }">
        <template slot="name" slot-scope="text">
          <a>{{ text }}</a>
        </template>
      </a-table>
      <div v-else>
        <div>
          <a-row>
            <a-col :span="12" class="textOv">
              <a class="textOvSpan" :href="annexUrl" target="view_window">
                <a-icon type="paper-clip" />
                {{ annexName }}
              </a>
            </a-col>
            <!-- <a-col :span="12"><a-icon type="vertical-align-bottom" /> </a-col> -->
          </a-row>
        </div>
      </div>
    </div>
    <!-- <a-button type="primary" @click="openAnnexUrl" icon="vertical-align-bottom">
      <a :href="annexUrl" target="view_window">下载地址</a>
    </a-button>-->
  </div>
</template>

<script>
import { selectByUserApproval } from "../api";
export default {
  props: ["approvalId"],
  data() {
    return {
      noApproval: false,
      annexName: "",
      annexUrl: "",
      autoSystem: "",
      ColumnsLength: 0,
      data: [],
      headList: [],
      infoList: []
    };
  },
  watch: {
    approvalId: {
      handler(val) {
        this.selectByUserApprovalId();
      },
      deep: true,
      immediate: true
    }
  },
  methods: {
    openAnnexUrl() {},
    getColumns() {
      const data = [
        {
          title: "姓名",
          width: 100,
          align: "center",
          dataIndex: "name"
        },
        {
          title: "身份证号",
          width: 100,
          align: "center",
          dataIndex: "idCard"
        },
        {
          title: "总缴费",
          width: 100,
          align: "center",
          dataIndex: "totalAmount"
        }
      ];
      this.ColumnsLength = [...data, ...this.headList].length;
      return [...data, ...this.headList];
    },
    selectByUserApprovalId() {
      selectByUserApproval(this.approvalId).then(res => {
        if (res.data) {
          this.noApproval = false;
          this.autoSystem = res.data.autoSystem;
          if (this.autoSystem) {
            const infoList = res.data.infoList;
            const infoListColumns = [];
            // 制作Columns
            infoList.map(z => {
              infoListColumns.push(...Object.keys(z.headDate));
            });
            const headList = new Set(infoListColumns);
            this.headList = [...headList].map(i => {
              return {
                title: i,
                dataIndex: i,
                width: 100,
                align: "center"
              };
            });
            // 制作底部
            const data1 = [...headList].reduce((res, key) => {
              res[key] = null;
              return res;
            }, {});
            this.data = infoList.map((i, index) => {
              const dataShow = Object.keys(data1).reduce((res, key) => {
                const val = Object.keys(i.headDate).filter(y => y === key);
                res[key] = i.headDate[val];
                return res;
              }, {});
              const objVal = Object.assign(dataShow, {
                key: index,
                name: i.name,
                idCard: i.idCard,
                totalAmount: i.totalAmount
              });
              return objVal;
            });
          } else {
            this.annexUrl = res.data.annexUrl;
            this.annexName = res.data.annexName;
            if (this.annexUrl === null || this.annexUrl === "") {
              this.$emit("getappRovalDet");
            }
          }
        } else {
          this.noApproval = true;
        }
      });
    }
  }
};
</script>

<style scoped>
.textOv {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  cursor: pointer;
}
</style>
